<template>
  <div class="flex bg-grey-2">
    <div class="flex col items-center">
      <q-input
        class="col"
        v-model.number="leftValue"
        filled
        :label="leftLabel"
        lazy-rules
        :rules="field.rules ? field.rules : null"
        :suffix="field.suffix || ''"
        debounce="500"
      />
      <div class="q-mx-sm text-bold" v-if="compare === 'b'">~</div>
      <q-input
        class="col"
        v-model="rightValue"
        filled
        :label="rightLabel"
        lazy-rules
        :rules="field.rules?field.rules:null"
        :suffix="field.suffix || ''"
        v-if="compare === 'b'"
        debounce="500"
      />
    </div>

    <q-btn flat unelevated :label="comparelabel[compare]" dense icon="code" stack>
      <q-popup-proxy :breakpoint="0">
        <q-list>
          <q-item clickable v-close-popup @click="changeCompare('g')">
            <q-item-section>
              <q-item-label :class="compare === 'g' ? 'text-bold' : ''">大于</q-item-label>
            </q-item-section>
          </q-item>

          <q-item clickable v-close-popup @click="changeCompare('b')">
            <q-item-section>
              <q-item-label :class="compare === 'b' ? 'text-bold' : ''">区间</q-item-label>
            </q-item-section>
          </q-item>

          <q-item clickable v-close-popup @click="changeCompare('l')">
            <q-item-section>
              <q-item-label :class="compare === 'l' ? 'text-bold' : ''">小于</q-item-label>
            </q-item-section>
          </q-item>
        </q-list>
      </q-popup-proxy>
    </q-btn>

  </div>
</template>

<script>
import { defineComponent } from 'vue';
export default defineComponent({
  name: 'scopeInput',
  props: {
    field: {
      type: Object,
      default: () => {}
    }
  },
  data () {
    return {
      leftValue: '',
      rightValue: '',
      compare: '', // g - 大于 l - 小于 b - 区间
      comparelabel: {
        g: '大于',
        b: '区间',
        l: '小于'
      }
    }
  },
  mounted () {
    this.compare = 'g';
  },
  methods: {
    changeCompare (type) {
      this.compare = type;
    },
    fieldValue () {
      if (this.leftValue || this.rightValue) {
        if (this.compare === 'l') {
          this.field.value = `|${String(this.leftValue).trim()}`
        } else if (this.compare === 'b') {
          this.field.value = `${String(this.leftValue).trim()}|${String(this.rightValue).trim() || ' '}`
        } else {
          this.field.value = `${String(this.leftValue).trim()}|`
        }
      } else {
        this.field.value = '';
      }
    }
  },
  watch: {
    'field.value' (val) {
      if (val) {
        // xxxxx|xxxxx 前面为大于的值， 后面为小于的值
        const valueArr = String(val).split('|');
        if (!valueArr[0] && valueArr[1]) {
          this.compare = 'l'; // 小于
          this.leftValue = valueArr[1];
          this.rightValue = '';
        } else if (valueArr[0] && valueArr[1]) {
          this.compare = 'b'; // 区间
          this.leftValue = valueArr[0];
          this.rightValue = valueArr[1].trim();
        } else {
          this.compare = 'g'; // 大于
          this.leftValue = valueArr[0];
          this.rightValue = '';
        }
      } else {
        this.leftValue = this.rightValue = '';
      }
    },
    leftValue () {
      this.fieldValue();
    },
    rightValue () {
      this.fieldValue();
    },
    compare () {
      this.fieldValue();
    }
  },
  computed: {
    leftLabel () {
      let label = '大于';
      if (this.compare === 'l') {
        label = '小于';
      } else if (this.compare === 'b') {
        label = '大于等于';
      }
      return `${this.field.label}${label}`;
    },
    rightLabel () {
      return `${this.field.label}小于等于`;
    }
  }
});
</script>
